<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Free Bootstrap 4 Datetime & Range Picker By Wired Dots</title>
        <meta name="description" content="Love Authority." />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
        <link rel="stylesheet" type="text/css" href="css/daterangepicker.css" />
    </head>
    <body style="height: 1500px;">
        <!--hero section-->
        <section class="mt-5">
            <div class="container">
                <div class="row">
                    <div class="col-sm-8 offset-sm-2 col-xs-12">
                        <div class="card border-none">
                            <div class="card-block p-5">
                                <h2 class="text-center">Bootstrap 4 Datetime & Range Picker</h2>
                                <p class="text-center">
                                    An open source datetime & range picker based on 
                                    <a href="http://www.daterangepicker.com" rel="nofollow">Date Range Picker</a>.
                                </p>
                                <div class="mt-5">
                                    <h5 class="mb-3">Date Range</h5>
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="daterange" placeholder="Select value">
                                    </div>
                                    <br/><br/>
                                    <h5 class="mb-3">Date Time</h5>
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="datetime" placeholder="Select value">
                                    </div>
                                    <br/><br/>
                                    <h5 class="mb-3">Single Date</h5>
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="date" placeholder="Select value">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="col-sm-12 mt-5 footer">
                        <p class="small text-center">
                            &copy; 2017 Datetime & Range Picker. A FREE Bootstrap 4 component by 
                            <a href="https://wireddots.com">Wired Dots</a>. Designed by <a href="https://twitter.com/attacomsian">@attacomsian</a>
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript" src="js/moment.min.js"></script>
        <script type="text/javascript" src="js/daterangepicker.js"></script>
        <script type="text/javascript" src="js/demo.js"></script>
    </body>
</html>
